<template>
  <div class="bs-page-main">
    <div class="seller-detail">
      <div class="pic-list-swiper swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="/data/pic/ring2.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="/data/pic/ring5.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="/data/pic/ring4.jpg" alt="" />
          </div>
          <div class="swiper-slide">
            <img src="/data/pic/ring5.jpg" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="main-box">
        <div class="pic-list">
          <div class="current">
            <img src="/data/pic/ring7.jpg" alt="" />
          </div>
          <ul class="pics">
            <li><img src="/data/pic/ring7.jpg" alt="" /></li>
            <li><img src="/data/pic/ring5.jpg" alt="" /></li>
            <li><img src="/data/pic/ring5.jpg" alt="" /></li>
            <li><img src="/data/pic/ring7.jpg" alt="" /></li>
            <li><img src="/data/pic/ring7.jpg" alt="" /></li>
            <li><img src="/data/pic/ring5.jpg" alt="" /></li>
          </ul>
        </div>
        <div class="detail-info">
          <div class="breadcrumb">
            <a href="">Home</a>/<a href="">Home</a>/<span>Best Sellers</span>
          </div>
          <div class="info">
            <h5 class="name">Thin Figaro Chain Necklace</h5>
            <div class="price">$49.00</div>
            <div class="des">
              Bold, chunky link necklace, handmade from recycled brass and
              plated in 14k gold. Interchangeable links can be used to resize or
              transform the necklace into a pair of bracelets.
            </div>
          </div>
          <div class="des-cell">
            <div class="d-tit">
              <span>Color：Gold</span>
              <a></a>
            </div>
            <div class="colors">
              <span class="cur c1"></span>
              <span class="c2"></span>
              <span class="c3"></span>
            </div>
          </div>
          <div class="des-cell">
            <div class="d-tit">
              <span>Size：44</span>
              <a></a>
            </div>
            <div class="size">
              <span class="cur">41</span>
              <span>42</span>
              <span>45</span>
              <span>42</span>
              <span>45</span>
              <span>42</span>
              <span>45</span>
              <span>42</span>
              <span>45</span>
              <span>42</span>
              <span>45</span>
            </div>
          </div>
          <div class="des-cell">
            <div class="btn">
              <a href="" class="add-cart">ADD TO CART</a>
              <a href="" class="add-fav"><i></i></a>
            </div>
          </div>
          <div class="des-cell">
            <div class="d-tit">
              <span>STORY</span>
              <a></a>
            </div>
            <div class="txt">
              Gold Vermeil Not to be confused with regular gold plating, our
              vermeil is 2 thick layer of 18k solid gold on brass meaning it
              will last longer. You get the look & feel of gold jewelry at a
              fraction of the price.
            </div>
          </div>
          <div class="des-cell">
            <div class="d-tit">
              <span>DESIGNER</span>
              <a></a>
            </div>
            <div class="txt">
              Gold Vermeil Not to be confused with regular gold plating, our
              vermeil is 2 thick layer of 18k solid gold on brass meaning it
              will last longer. You get the look & feel of gold jewelry at a
              fraction of the price.
            </div>
          </div>
          <div class="des-cell">
            <div class="d-tit">
              <span>DETAILS</span>
              <a></a>
            </div>
            <div class="txt">
              Gold Vermeil Not to be confused with regular gold plating, our
              vermeil is 2 thick layer of 18k solid gold on brass meaning it
              will last longer. You get the look & feel of gold jewelry at a
              fraction of the price.
            </div>
          </div>
          <div class="des-cell bt">
            <div class="d-tit">
              <span>RANHOU</span>
              <a></a>
            </div>
            <div class="txt">
              Gold Vermeil Not to be confused with regular gold plating, our
              vermeil is 2 thick layer of 18k solid gold on brass meaning it
              will last longer. You get the look & feel of gold jewelry at a
              fraction of the price.
            </div>
          </div>
          <div class="advantage">
            <div><i class="fast"></i>Fast and free delivery</div>
            <div><i class="refund"></i>30 day refund guarantee</div>
            <div><i class="shop"></i>Worry free guarantee</div>
            <div><i class="support"></i>Lifetime customer support</div>
          </div>
        </div>
      </div>
    </div>
    <div class="seller-detail-comment">
      <div class="main-box">
        <a
          href="javascript:"
          class="write-comment"
          @click="addReviewFlag = true"
          >WRITE A REVIEW</a
        >
        <div class="tit">Reviews</div>
        <div class="comment-box">
          <div class="comment-score">
            <div class="score">
              <b>5.0</b>
              <div class="star">
                <span></span> <span></span> <span></span> <span></span>
                <span></span>
              </div>
            </div>
            <div class="txt">Based on 10 reviews</div>
          </div>
          <div class="comments-list">
            <div class="counts">
              <span>10 Reviews</span>
              <div class="sort-switch">
                Sort By:<b @click="sortVisible = !sortVisible"
                  >{{ sortTap || "Category" }}<i></i
                ></b>
              </div>
              <div :class="sortVisible ? 'sort-select cur' : 'sort-select'">
                <div class="tit">
                  Category
                  <a href="javascript:" @click="sortVisible = false"></a>
                </div>
                <ul class="options">
                  <li
                    v-for="o in dict.sort"
                    :key="o.id"
                    :class="sortTap === o.name && 'cur'"
                    @click="sortTap = o.name"
                  >
                    <i></i>{{ o.name }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="comment-cell">
              <div class="user-info">
                <img src="/data/pic/avatar.jpg" alt="" /> Emily B
              </div>
              <div class="comment-fb">
                <div class="comment-content">
                  <div class="c-score">
                    <div class="sc">
                      <span></span><span></span><span></span><span></span
                      ><span></span>
                    </div>
                    <div class="date">2024-10-24</div>
                  </div>
                  <div class="content">
                    “My son tried Cob at camp and told me I needed to buy it. I
                    honestly think I’ve eaten more of the bags than he has lol.
                    This stuff is seriously addictive. Can’t even decide which
                    flavor is our favorite because they’re just that good.”
                  </div>
                  <div class="pics">
                    <img src="/data/pic/ring1.png" alt="" />
                  </div>
                </div>
                <div class="inner-comment">
                  <div class="avatar">
                    <img src="/data/pic/avatar.jpg" alt="" />
                  </div>
                  <div class="i-comment">
                    <div class="name">KVK</div>
                    <div class="date">2024-10-24</div>
                    <div class="cmt">
                      “My son tried Cob at camp and told me I needed to buy it.
                      I honestly think I’ve eaten more of the bags than he has
                      lol. This stuff is seriously addictive. Can’t even decide
                      which flavor is our favorite because they’re just that
                      good.”
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment-cell">
              <div class="user-info">
                <img src="/data/pic/avatar.jpg" alt="" /> Emily B
              </div>
              <div class="comment-fb">
                <div class="comment-content">
                  <div class="c-score">
                    <div class="sc">
                      <span></span><span></span><span></span><span></span
                      ><span></span>
                    </div>
                    <div class="date">2024-10-24</div>
                  </div>
                  <div class="content">
                    “My son tried Cob at camp and told me I needed to buy it. I
                    honestly think I’ve eaten more of the bags than he has lol.
                    This stuff is seriously addictive. Can’t even decide which
                    flavor is our favorite because they’re just that good.”
                  </div>
                </div>
              </div>
            </div>
            <a href="" class="more"><span>Show More</span></a>
          </div>
        </div>
      </div>
    </div>
    <div class="wish-count">
      <div class="main-box">
        <h3>You may also like</h3>
      </div>
    </div>

    <div class="item-list-box wish-lt nb">
      <div class="main-box">
        <ul class="item-list">
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring2.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring3.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring4.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <img src="/data/pic/ring2.jpg" alt="" class="poster" />
              <img src="/data/pic/ring1.png" alt="" class="hover" />
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div
      v-if="sortVisible || addReviewFlag"
      :class="addReviewFlag ? 'full-musk cmt-tk' : 'full-musk'"
    ></div>
    <div :class="addReviewFlag ? 'add-review-tk cur' : 'add-review-tk'">
      <div class="tit">Write A Review</div>
      <a class="cls" @click="addReviewFlag = false"></a>
      <div class="review-form">
        <div class="star-point">
          <div class="pic">
            <img src="/data/pic/ring2.jpg" alt="" />
          </div>
          <div class="info">
            <div class="name">Thin Figaro Chain Necklace</div>
            <div class="star-edit">
              <span
                v-for="i in 5"
                :key="i"
                :class="i <= point ? 'cur' : ''"
                @click="point = i"
              ></span>
            </div>
          </div>
        </div>
        <textarea placeholder="Review Description"></textarea>
        <div class="product-standouts">
          <div class="lb">Product Standouts</div>
          <p>Choose Up To 5 Options</p>
          <ul>
            <li
              v-for="i in dict.standoutList"
              :key="i"
              :class="standout === i && 'cur'"
              @click="standout = i"
            >
              {{ i }}
            </li>
          </ul>
        </div>
      </div>
      <div class="btn">
        <a class="save">Review</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      sortVisible: false,
      addReviewFlag: false,
      point: 4,
      sortTap: "highest rating",
      standout: "High quality",
      dict: {
        standoutList: [
          "High quality",
          "Durable",
          "Good Weight",
          "Versatile",
          "Looks Expensive",
          "Attracts Compliments",
          "Unique",
          "Great Gift",
          "Great Value",
        ],
        sort: [
          {
            name: "highest rating",
            id: "highest rating",
          },
          {
            name: "rating",
            id: "rating",
          },
        ],
      },
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      new this.$Swiper(".pic-list-swiper", this.swiperOptions);
    },
  },
};
</script>
